{extend name="lib/common_list" /}
{block name="title"}{/block}
{block name="css"}{/block}
{block name="javascript"}
<script>
    /**
     * 加载表格
     */
    function initTable() {
        //先销毁表格
        $('#tb').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#tb").bootstrapTable({
            method: "Post",  //使用Post请求到服务器获取数据
            url: "{:url('user/getlist')}", //获取数据的Servlet地址
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            pageSize: 15,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [15, 50],  //记录数可选列表
            search: false,  //是否启用查询
            sortable: true, //是否启用排序
            sortOrder: "desc", //排序方式
            //showColumns: true,  //显示下拉框勾选要显示的列
            //showRefresh: true,  //显示刷新按钮
            //sortName: "PullTime",
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "limit",
            contentType: "application/x-www-form-urlencoded",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    limit: params.limit,
                    offset: params.offset,
                    sortName: params.sort,
                    sortOrder: params.order,
                    keywords: $("input[name=keywords]").val(),
                    applet_id: $("#applet_id").val(),
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行

            },
            onLoadError: function () {  //加载失败时执行
                layer.msg("加载数据失败", { time: 1500, icon: 2 });
            },
            rowStyle: function (row, index) {
                var strclass = "";
                return { classes: strclass }
            }
        });
    }

    $(document).ready(function () {
        //调用函数，初始化表格
        initTable();
        //点击查询按钮
        $("#search").bind("click", initTable);
        $("#btnAdd").bind("click", add);
    });

    function initAcTable() {
        initTable();
    }

    /**
     * 详情页
     */
    var layer_view_index;
    function view(id) {
        layer_view_index = layer.open({
            type:2,
            title:'微信用户详情',
            area:['70%', '90%'],
            content:"{:url('user/view')}?id=" +id
        })
    }


    /**
     * 日期
     * @param index
     * @param row
     * @returns {string}
     */
    function dateFormat(index, row) {
        if (index == null || index == 0) return;
        var date = new Date(index * 1000);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute;
    }

    /**
     * 动作
     * @param row
     * @param index
     * @returns {string}
     */
    function operateFormatter(index, row) {
        var html = "";
        html += "<a href=\"javascript:view("+ row.id + ");\"><i class=\"glyphicon glyphicon-eye-open text-default\"></i>详情</a>&nbsp;&nbsp;";
        if (row.is_system) {
            html += "<a href=\"javascript:system("+ row.id + ", '"+ row.nick_name +"', "+ row.is_system +");\"><i class=\"glyphicon glyphicon-user text-default\"></i>普通用户</a>&nbsp;&nbsp;";
        } else {
            html += "<a href=\"javascript:system("+ row.id + ", '"+ row.nick_name +"', "+ row.is_system +");\"><i class=\"glyphicon glyphicon-user text-danger\"></i>系统用户</a>&nbsp;&nbsp;";
        }

        return html;
    }

    function appletValue(){
        var applet_id = $('#applet_name').children('option:selected').attr('applet_id');
        $('#applet_id').val(applet_id);
    }

    /**
     * 图片
     * @param index
     * @param row
     * @returns {string}
     */
    function avatarImageFormat(index, row) {
        if (index) {
            var patt1 = new RegExp("^(http:\/\/|https:\/\/).*$");
            pic_url = index;
            var html = '<img src="' + pic_url + '" class="show_image" style="width: 100px;height: 70px;" height="25">';
            html += '<div style="display: none; background:#fff; margin-top:5px; border:solid 1px #ff940a;position:absolute;z-index:999;">';
            html += '<img src="' + pic_url + '" width="250"></div>';
            return html;
        } else {
            return "";
        }
    }

    function genderFormat(index, row) {
        if (index == 1) {
            return "男";
        } else {
            return '女';
        }
    }

    function systemFormat(index, row) {
        if (index == 1) {
            return "系统用户";
        } else {
            return '普通用户';
        }
    }

    /**
     * 加入系统用户
     * @param id
     * @param nick_name
     * @param is_system
     */
    function system(id, nick_name, is_system) {
        var msg = '你确定要将【'+ nick_name +'】加入系统用户吗？';
        if (is_system == 1) {
            msg = '你确定要将【'+ nick_name +'】移出系统用户吗？';
        }
        layer.confirm(msg, {
            btn: ['是', '否'] //按钮
        }, function () {
            var load_index = layer.load(0, { shade: false });
            $.ajax({
                type: "post",
                url: "{:url('user/system')}",
                data: { id: id },
                dataType: "json",
                success: function (result) {
                    layer.close(load_index);
                    if (result.code == 1) {
                        var ly = layer.alert(result.msg, function () {
                            $('#tb').bootstrapTable('refresh');
                            layer.close(ly);
                        });
                    } else {
                        layer.alert(result.msg);
                    }
                },
                error:function(xhr,textStatus){
                    layer.close(load_index);
                    layer.alert('服务器繁忙！');
                }
            });
        });
    }

    // 刷新当前一页表格
    function refreshtb() {
        $('#tb').bootstrapTable('refresh');
    }
</script>
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5></h5>
                </div>
                <div class="col-sm-2 m-b-xs">
                   <!-- <span>
                        <button type="button" class="btn btn-primary btn-sm" id="btnAdd"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                    </span>-->
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-2">
                            <div class="input-group">
                                <select class="form-control" name="applet_name" id="applet_name" onchange="appletValue()">
                                    <option value="">请选择小程序 .....</option>
                                    {volist name="applet_list" id="v"}
                                    <option value="{$v.name}" applet_id="{$v.id}">{$v.name}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div>
                            <input type="hidden" id="applet_id"/>

                        </div>

                        <div class="col-sm-2 col-sm-offset-2">
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <input type="text" placeholder="请输入搜索关键字" class="input-sm form-control" id="keywords" name="keywords">
                                    <button type="button" class="btn btn-sm btn-primary" id="search">搜索</button>
                                </span>
                            </div>
                        </div>
                        <span id="refresh" class="fa fa-refresh fa-spin" title="刷新" onclick="javascript:$('#tb').bootstrapTable('refresh')"></span>

                    </div>
                    <table data-toggle="table" id="tb" data-pagination="true">
                        <thead>
                        <tr>
                            <th data-align="center" data-field="nick_name">昵称</th>
                            <th data-align="center" data-field="applet_name">小程序</th>
                            <th data-align="center" data-field="openid">OPEN ID</th>
                            <th data-align="center" data-field="gender" data-formatter="genderFormat">性别</th>
                            <th data-align="center" data-field="avatar_url" data-formatter="avatarImageFormat" >头像</th>
                            <th data-align="center" data-field="is_system" data-formatter="systemFormat" >系统|用户</th>
                            <th data-align="center" data-field="out_rules_times" data-sortable="true" >违规次数</th>
                            <th data-align="center" data-formatter="operateFormatter">操作</th>
                        </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}